<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    destroyOnClose
    :footer="null"
    cancelText="关闭">
    <div>
      <div class="bpmn-viewer-container">
        <div id="bpmnCanvas" style="width:100%;height:500px;margin: 0 auto;"></div>
      </div>
    </div>
  </a-modal>
</template>

<script>
  import BpmnViewer from 'bpmn-js'
  import 'bpmn-js/dist/assets/diagram-js.css'
  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
  import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
  import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
  import { getAction } from '../../../../api/manage'

  export default {
    props: {
      headerButtonSize: {
        type: String,
        default: 'small',
        validator: value => ['default', 'medium', 'small', 'mini'].indexOf(value) !== -1
      },
      reviewObj: {
        type: Object
      }
    },
    name: 'reviewRuningFlow',
    components: {},
    data() {
      return {
        title: '流程预览',
        bpmnViewer: null,
        showViewDialog: false,
        visible:false,
        confirmLoading:false,
        url: {
          versionXml: '/process/extActProcess/getVersionXml'
        }
      }
    },
    methods: {
      preview(deploymentId) {
        this.visible = true;
        this.$nextTick(() => {
          this.initPage(deploymentId)
        })
      },
      initPage(deploymentId) {
        this.bpmnViewer = new BpmnViewer({
          container: '#bpmnCanvas',
          width: '100%',
        })
        getAction(this.url.versionXml, { 'deploymentId': deploymentId }).then(res => {
          if (res.success) {
            this.importXml(res.result)
          }
        })
      },

      getHtmlAttr(source, element, attr) {
        let result = []
        let reg = '<' + element + '[^<>]*?\\s' + attr + '=[\'"]?(.*?)[\'"]?\\s.*?>'
        let matched = source.match(new RegExp(reg, 'gi'))
        matched && matched.forEach(item => {
          item && result.push(item)
        })
        return result
      },

      async importXml(modelXml) {
        // 处理排他网关， 注：流程图预览时，排他网关需要在对应的<bpmndi:BPMNShape>节点上添加属性isMarkerVisible="true"
        let gatewayIds = this.getHtmlAttr(modelXml, 'exclusiveGateway', 'id')
        let modelXmlTemp = modelXml
        if (gatewayIds && gatewayIds.length > 0) {
          gatewayIds.forEach(item => {
            const result = new RegExp('id="(.+?)"').exec(item)
            if (result && result[1]) {
              modelXmlTemp = modelXmlTemp.replace('bpmnElement="' + result[1] + '"', 'bpmnElement="' + result[1] + '" isMarkerVisible="true"')
            }
          })
        }
        const result = await this.bpmnViewer.importXML(modelXml)
      },
      handleCancel(){
        this.visible = false;
      }
    }
  }
</script>